<script setup></script>

<script>
import {ref} from "vue";
import axios from "axios";

export default {
  setup() {
    const message = ref("");

    return {
      message,
    };
  },
  data: () => {
    return {
      plates: [],
      selectedDate: "",
      selectedProvince: "",
      showProvinceDropdown: false,

      dailyRecords: [],
      provinceRecords: [],
      currentPage: "home", // 确保初始值正确
      parkingStatus: "正常",
      activePlates: [],
      showDailyNotFound: false,
      showProvinceNotFound: false,
      feeSettings: {
        feeWithin1Hour: 5, // 默认值
        feeAfter1Hour: 2, // 默认值
        feeWithin24Hours: 50, // 默认值
      },
      selectedDateRange1:
          new Date().getFullYear() +
          "-" +
          (new Date().getUTCMonth() + 1) +
          "-" +
          new Date().getUTCDate(),
      selectedDateRange2:
          new Date().getFullYear() +
          "-" +
          (new Date().getUTCMonth() + 1) +
          "-" +
          new Date().getUTCDate(),
    };
  },
  methods: {
    async fetchPlates() {
      try {
        const response = await axios.get("http://localhost:8000/plates/active");
        this.plates = response.data.plates;
      } catch (error) {
        console.error("获取车牌记录失败:", error);
      }
    },

    async fetchActivePlates() {
      try {
        const response = await axios.get("http://localhost:8000/plates/active");
        this.activePlates = response.data.plates;
      } catch (error) {
        console.error("获取车位状态失败:", error);
      }
    },

    isOccupied(slotNumber) {
      return this.activePlates.some((plate) => plate.location === slotNumber);
    },
  },
  created() {
    this.fetchPlates();
    this.fetchActivePlates();


    setInterval(this.fetchActivePlates, 5000);
    setInterval(this.fetchPlates, 2000);  // 添加这行代码，每2秒刷新一次
  },
};
</script>

<template>
  <div style="height: 100%">
    <div>
      <h1 class="text-center mb-4">停车场状态</h1>
      <div class="alert alert-info">当前停车场状态：{{ parkingStatus }}</div>
      <div class="parking-grid">
        <div
            v-for="i in 100"
            :key="i"
            class="parking-slot"
            :class="{ occupied: isOccupied(i) }"
        >
          {{ i }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
